<template>
    <my-dialog 
    v-model="model" 
    title="发票信息" 
    width="660px"
    >
        <my-form 
        v-model="form"
        readonly
        table
        >

            <el-form-item 
            class="table-full-row"
            label="发票类型" 
            >
                <my-radio
                    readonly
                    v-model="form.type"
                    :data="[{key:'1', value:'增值税电子普通发票'},]"
                ></my-radio>
            </el-form-item>

            <el-form-item 
            label="发票内容" 
            >
                <my-radio
                    readonly
                    v-model="form.content"
                    :data="[{key:'技术服务费', value:'技术服务费'},]"
                ></my-radio>
            </el-form-item>

            <el-form-item 
            label="抬头类型" 
            >
                <my-radio
                    readonly
                    v-model="form.risetype"
                    :data="[{key:'1', value:'企业'},{key:'2', value:'个人（抬头类型为个人，则只能开具姓名的发票）'},]"
                ></my-radio>
            </el-form-item>

            <template v-if="form.risetype === '2'">
                <el-form-item 
                label="姓名" 
                >
                    {{form.addname}}
                </el-form-item>
                
                <el-form-item 
                label="身份证号" 
                >
                    {{form.addidnumber}}
                </el-form-item>

                <el-form-item 
                label="电子邮箱" 
                >
                    {{form.addmailbox}}
                </el-form-item>
            </template>

            <template v-if="form.risetype === '1'">
                <el-form-item 
                label="企业名称" 
                >
                    {{form.addname}}
                </el-form-item>
                
                <el-form-item 
                label="纳税人识别码" 
                >
                    {{form.taxpayernum}}
                </el-form-item>

                <el-form-item 
                label="发票地址" 
                >
                    {{form.invoiceaddress}}
                </el-form-item>
                
                <el-form-item 
                label="电话" 
                >
                    {{form.invoicemobile}}
                </el-form-item>

                <el-form-item 
                label="开户行" 
                >
                    {{form.bankofdeposit}}
                </el-form-item>
                
                <el-form-item 
                label="银行账号" 
                >
                    {{form.bankcardnumber}}
                </el-form-item>
            </template>

            <el-form-item 
            label="电子发票" 
            class="table-full-row"
            >
                <!-- <upload-s :fileguid="form.fileguid" readonly></upload-s> -->
                <uploadFiles :fileguid="form.fileguid" readonly></uploadFiles>
            </el-form-item>
        </my-form>
    </my-dialog>
</template>

<script>
import MODEL_MIXIN from '@mixins/model';
import uploadFiles from '@/pages/user/center/components/upload-files.vue';

export default {
    mixins: [MODEL_MIXIN],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    components:{uploadFiles},
    data() {
        return {
            form: {
                type: '',
                risetype: '',
                content: '',

                addname: '',
                addidnumber: '',
                addmailbox: '',

                invoiceaddress: '',
                taxpayernum: '',
                invoicemobile: '',
                bankofdeposit: '',
                bankcardnumber: '',
            },
        };
    },
    computed: {
        detailExtra() {
            return {
                guid: this.data.fictitiousguid,
            };
        },
    },
    watch: {
        value(val) {
            if (val) {
                this.detailHandler();
            }
        },
    },
    methods: {
        cancleHandler() {
            this.$emit('close');
        },
        detailHandler() {
            this.$get(`${this.$store.state.api.webUrl}/orderinvoice/detail.json`, this.detailExtra, data => {
                var form = data || {};

                form.ordercode = form.ordercode || this.data.fictitiousguid;
                form.risetype = form.risetype || '1';
                form.type = form.type || '1';

                this.form = form;
            });
        },
    },
};
</script>